<template>
  <div class="topbar">
    <div class="header-logo pull-left logo-box">
      <div class="logo-wrapper pull-left">
        <router-link to="/">
          <a class="header-icon pull-left">
            <img src="@/assets/logo.png">
          </a>
          <a class="console-link pull-left">
            <span>AOS.INK</span>
          </a>
        </router-link>
      </div>
      <div class="pull-right topbar-info clearfix">
        <div class="pull-left topbar-info-item topbar-info-dropdown expense-box">
          <a class="topbar-btn topbar-info-dropdown-toggle">
            <!-- <span>帮助</span> -->
            <font-awesome-icon icon="question-circle" style="font-size:16px;"/>
            <font-awesome-icon icon="angle-down" style="margin-left:4px;"/>
          </a>
          <ul class="topbar-info-dropdown-memu topbar-info-dropdown-memu-list">
            <li class="topbar-info-btn">
              <a @click="$router.push('/dev/apidoc')">
                <span>Rest接口文档</span>
              </a>
            </li>
            <li class="topbar-info-btn">
              <span class="topbar-info-btn-gap"></span>
              <router-link to="/about">关于</router-link>
            </li>
          </ul>
        </div>
        <div class="pull-left topbar-info-item topbar-info-dropdown user-box">
          <a target="_blank" class="topbar-info-dropdown-toggle topbar-btn" rel="noopener noreferrer">
            <img class="topbar-user-avatar" :src="$URL_ADDR.my.avatar">
          </a>
          <div class="topbar-info-dropdown-memu topbar-info-dropdown-memu-list">
            <div class="topbar-user-header">
              <h3>
                <img class="topbar-user-avatar" :src="$URL_ADDR.my.avatar">
                <span :title="myinfo.email" class="topbar-user-email">{{myinfo.email}}</span>
              </h3>
              <ul class="topbar-user-entrance-list">
                <li class="topbar-user-entrance">
                  <a href="#" title="基本资料" target="_target">基本资料</a>
                </li>
                <li class="topbar-user-entrance">
                  <a href="#" title="实名认证" target="_target">实名认证</a>
                </li>
                <li class="topbar-user-entrance">
                  <a href="#" title="安全设置" target="_target">安全设置</a>
                </li>
              </ul>
            </div>
            <div class="topbar-user-body">
              <ul class="topbar-user-entrance-list">
                <li class="topbar-user-entrance">
                  <a href="#" target="_target" rel="noopener noreferrer">
                    <span class="topbar-user-entrance-logo-box">
                      <i class="topbar-user-entrance-logo icon-topbar-secure-control topbar-sidebar-secure-control"></i>
                    </span>
                    <span class="topbar-user-entrance-name">安全管控</span>
                  </a>
                </li>
                <li class="topbar-user-entrance">
                  <a href="#" target="_target" rel="noopener noreferrer">
                    <span class="topbar-user-entrance-logo-box">
                      <i class="topbar-user-entrance-logo icon-topbar-ram topbar-sidebar-ram1"></i>
                    </span>
                    <span class="topbar-user-entrance-name">访问控制</span>
                  </a>
                </li>
                <li class="topbar-user-entrance">
                  <a href="#" target="_target" rel="noopener noreferrer">
                    <span class="topbar-user-entrance-logo-box">
                      <i class="topbar-user-entrance-logo icon-topbar-accesskeys topbar-sidebar-accesskeys"></i>
                    </span>
                    <span class="topbar-user-entrance-name">accesskeys</span>
                  </a>
                </li>
                <li class="topbar-user-entrance">
                  <a href="#" target="_target" rel="noopener noreferrer">
                    <span class="topbar-user-entrance-logo-box">
                      <i class="topbar-user-entrance-logo icon-account topbar-sidebar-account"></i>
                    </span>
                    <span class="topbar-user-entrance-name">会员权益</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="topbar-user-footer">
              <a @click="logout" rel="noopener noreferrer">退出管理控制台</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    myinfo: function() {
      return this.$store.state.account.user;
    }
  },
  created() {},
  methods: {
    logout() {
      this.$http({
        url: this.$URL_ADDR.my.logout,
        method: "POST"
      }).then(() => {
        this.$store.dispatch("account/logout");

        this.$message({
          message: "退出成功!",
          type: "success"
        });
        this.$router.push("/");
      });
    }
  }
};
</script>
<style lang="less" scoped>
@background-color: #252a2f;
@button-color: #ffffff;
@button-hover-color: #00c1de;
@button-hover-bgcolor: #191d21;

.topbar {
  background-color: @background-color;
  height: 50px;
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 1030 !important;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
  }
  a,
  li,
  p,
  span {
    text-rendering: optimizeLegibility;
    letter-spacing: 0.02em;
    text-decoration: none;
  }
  ul {
    list-style: none;
  }
  .header-logo {
    height: 50px;
    a:hover {
      background: @button-hover-bgcolor;
    }
    .logo-wrapper {
      .header-icon {
        margin-right: 1px;
        text-align: center;
        width: 50px !important;
        font-size: 24px;
        color: @button-color;
        line-height: 50px;
        height: 50px;
        text-decoration: none;

        img {
          margin-top: 10px;
          width: 30px;
          height: 30px;
        }
      }
      .console-link {
        color: @button-color;
        font-size: 14px;
        line-height: 50px;
        margin-right: 1px;
        padding: 0 12px;
        text-align: center;
        text-decoration: none;
      }
    }

    .topbar-info {
      position: absolute;
      z-index: 3;
      top: 0;
      right: 0;
      .topbar-search {
        margin-right: 12px;
        position: relative;
        .topbar-search-container {
          display: inline-block;
          vertical-align: middle;
          margin: 12px 0;
        }
      }
      .topbar-info-item {
        display: inline-block;
      }
      .topbar-info-dropdown {
        position: relative;
        &:hover {
          .topbar-info-dropdown-memu {
            visibility: visible;
            opacity: 1;
          }
        }
        .topbar-info-dropdown-memu {
          padding: 8px 0;
          position: absolute;
          top: 100%;
          right: 0;
          visibility: hidden;
          float: left;
          list-style: none;
          background-color: #191d21;
          color: @button-color;
          background-clip: padding-box;
          z-index: 1;
          font-size: 12px;
          min-width: 100%;
          margin: 0;
          border: none;
          -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
          -webkit-transition: opacity 0.15s, visibility 0s 0.15s;
          transition: opacity 0.15s, visibility 0s 0.15s;
          opacity: 0;
          white-space: nowrap;

          li a {
            display: block;
            padding: 0 24px;
            clear: both;
            font-weight: 400;
            line-height: 1.5;
            color: @button-color;
            white-space: nowrap;
            min-width: 120px;
            -webkit-transition: all 0.15s;
            transition: all 0.15s;
            cursor: pointer;
            &:hover {
              text-decoration: none;
              color: @button-hover-color;
            }
          }
        }
      }
      .topbar-btn {
        padding: 0 12px;
        height: 50px;
        display: block;
        z-index: 2;
        font-size: 14px;
        line-height: 50px;
        text-decoration: none;
        color: @button-color;
        &:hover {
          background-color: rgba(0, 0, 0, 0.25);
        }
      }
    }
  }
}

.topbar .topbar-info .topbar-info-btn a {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
}

.topbar .topbar-user-avatar {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  border-radius: 16px;
}
.topbar .topbar-user-header {
  padding: 10px 15px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.1);
}
.topbar .topbar-user-header h3 {
  font-size: 12px;
  font-weight: 400;
}
.topbar .topbar-user-header .topbar-user-email {
  margin-left: 10px;
  vertical-align: middle;
}
.topbar .topbar-user-header .topbar-user-entrance-list {
  min-width: 250px;
  overflow: hidden;
  margin-top: 10px;
}

.topbar .topbar-user-header .topbar-user-entrance-list li:first-child {
  border-left: none;
}
.topbar .topbar-user-header .topbar-user-entrance-list li {
  float: left;
  width: 33.333333%;
  border-left: 1px solid hsla(0, 0%, 100%, 0.1);
  text-align: center;
}
.topbar .topbar-user-header .topbar-user-entrance-list li a {
  color: @button-color;
  opacity: 0.85;
  min-width: 0;
  padding: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .topbar-user-body .topbar-user-entrance-list a {
  line-height: 32px;
  height: 32px;
  padding: 0 15px;
}
.topbar .topbar-user-footer {
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
}
.topbar .topbar-user-footer a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: @button-color;
}
</style>
